<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>加密聊天小工具</title>
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script>
			var config = [
				[' ','A','B','C','D','E','F','G','H','I'],
				['R','。','Q','P','O','N','M','L','K','J'],
				['S','T','：','U','V','W','X','Y','Z','a'],
				['j','i','h','？','g','f','e','d','c','b'],
				['k','l','m','n','/','o','p','q','r','s'],
				['>','<','z','y','x','、','w','v','u','t'],
				['=','+','-','$','¥','%','*','#','《','》'],
				['【','】','[',']','{','}','.','!','“','”'],
				['‘','’','&','(',')','NA','NA','.',';','0'],
				['1','2','3','4','5','6','7','8','9',',']
			];
			var map = new Map();
			function config2Map(){
				for(var i=0;i<config.length;i++){
					let arr = config[i];
					for(var j=0;j<arr.length;j++){
						map.set(arr[j], j+''+i);
					}
				}
				console.log(map);
			}
			function trans(str) {
				console.log(str);
				let rst = '';
				for(var i=0;i<str.length;i++){
					if(i%2==1){
						let pre = str.charAt(i-1);
						let curr = str.charAt(i);
						console.log(pre+'_'+curr);
						let a = config[curr][pre];
						rst += a;
					}
				}
				console.log(rst);
				return rst;
			}
			
			function dtrans(str) {
				console.log(str);
				let rst = '';
				for(var i=0;i<str.length;i++){
					rst += map.get(str.charAt(i));
				}
				console.log(rst);
				return rst;
			}
			
			$(document).ready(function(){
			    config2Map();
				$("#dtr").bind("click", function() {
					$("#rst").text('');
				        let rst = trans($("#ipt").val());
						$("#rst").text(rst);
				    });
					$("#tr").bind("click", function() {
						$("#rst").text('');
					        let rst = dtrans($("#ipt").val());
							$("#rst").text(rst);
					    });
			})
		</script>
	</head>
	<body>
		<div style="width: 100%; height: 50px;"><input type="text" id="ipt" style="width: 100%; height: 100%;"/></div>
		<div style="width: 100%; height: 50px; margin: 10px;">
			<button id="tr" style="width: 45%; height: 50px;">转</button>
			<button id="dtr" style="width: 45%; height: 50px;">解</button>
			</div>
		<div id="rst" style="width: 100%; height: 200px;">...</div>
	</body>
</html>
